﻿* {
    margin: 0;
    padding: 0
}

html {
    font-size: 20px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

html, body {
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline
}

img, video {
    max-width: 100%;
    height: auto;
    border: 0 none;
    vertical-align: bottom
}

li {
    list-style: none
}

svg:not(:root) {
    overflow: hidden
}

a {
    text-decoration: none
}

a, img, button, input[type='button'], input[type='submit'], input[type='reset'] {
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
}

input:-ms-clear {
    display: none
}

input[type='search']::-webkit-search-cancel-button {
    display: none
}

input, textarea {
    -webkit-user-modify: read-write-plaintext-only;
    -webkit-appearance: none;
    outline: none
}

button, input, textarea {
    border: 0 none
}

body, button, input, textarea, select, option, pre, optgroup {
    line-height: 1.5;
    font-family: "Microsoft YaHei", "微软雅黑", Helvetica, Arial;
    color: #333;
    font-size: 0.6rem
}

.f-cb:after, .f-cb li:after {
    content: '';
    display: table;
    clear: both
}

.f-wsn {
    word-wrap: normal;
    white-space: nowrap
}

.f-wwb {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all
}

.f-toe {
    overflow: hidden;
    word-wrap: normal;
    white-space: nowrap;
    text-overflow: ellipsis
}

.f-ma {
    margin-left: auto;
    margin-right: auto
}

.f-box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.m-alert {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background-color: transparent
}

.m-alert .text {
    width: 11rem;
    padding: 1.25rem 0.75rem;
    text-align: center;
    line-height: 1.4rem;
    font-size: 0.8rem;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 0.25rem
}

.m-alert.fx-fadeIn, .m-alert.fx-fadeOut {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: ease;
    animation-fill-mode: ease
}

[class*='fx-'] {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.fx-bug {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: visible;
    backface-visibility: visible
}

.fx-gpu, .m-lottery-tiger .game .item .roller {
    -webkit-transform: "translateZ(0)";
    transform: "translateZ(0)";
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px
}

.fx-infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.fx-fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

.fx-fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@media screen and (min-width: 320px) {
    html {
        font-size: 20px
    }
}

@media screen and (min-width: 360px) {
    html {
        font-size: 22.5px
    }
}

@media screen and (min-width: 375px) {
    html {
        font-size: 23.4375px
    }
}

@media screen and (min-width: 384px) {
    html {
        font-size: 24px
    }
}

@media screen and (min-width: 400px) {
    html {
        font-size: 25px
    }
}

@media screen and (min-width: 412px) {
    html {
        font-size: 25.75px
    }
}

@media screen and (min-width: 414px) {
    html {
        font-size: 25.875px
    }
}

@media screen and (min-width: 533px) {
    html {
        font-size: 33.3125px
    }
}

@media screen and (min-width: 600px) {
    html {
        font-size: 37.5px
    }
}

@media screen and (min-width: 768px) {
    html {
        font-size: 48px
    }
}

.m-ui-dial {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 0 auto;
    background: url("../images/dial_bg.png") no-repeat center;
    background-size: 100%
}

.m-ui-dial .pointer {
    margin-top: -139px !important;
    background: url("../images/dial_pointer.png") no-repeat center;
    background-size: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 150px;
    height: 238px;
    margin: -119px 0 0 -75px;
    -webkit-transform-origin: 75px 139px;
    transform-origin: 75px 139px;

}

.m-ui-dial .btn {
    position: absolute;
    top: 64px;
    left: 0;
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 75px
}

.m-ui-scratch {
    display: block;
    width: 300px;
    height: 172.5px;
    margin: 20px auto;
    background: no-repeat center;
    background-size: 100%
}

.m-ui-button {
    display: block;
    width: 160px;
    height: 32px;
    margin: 0 auto;
    text-align: center;
    line-height: 32px;
    font-size: 12px;
    color: #fff;
    background-color: #f94804;
    cursor: pointer;
    border-radius: 5px
}

.m-ui-tiger {
    position: relative;
    width: 640px;
    height: 432px;
    margin: 20px auto;
    background: url("../images/tiger_bg.png") no-repeat
}

.m-ui-tiger .toggle {
    position: absolute;
    top: 306px;
    left: 119px;
    display: block;
    width: 404px;
    height: 50px
}

.m-ui-tiger .item {
    position: absolute;
    top: 77px;
    left: 139px;
    display: block;
    width: 110px;
    height: 135px;
    overflow: hidden
}

.m-ui-tiger .item:nth-child(2) {
    left: 265px
}

.m-ui-tiger .item:nth-child(3) {
    left: 391px
}

.m-ui-tiger .roller {
    position: relative
}

.m-ui-tiger .roller li {
    width: 110px;
    height: 135px;
    overflow: hidden
}

.m-ui-tiger .roller li:last-child {
    position: absolute;
    top: 100%;
    left: 0
}

.m-ui-tiger .roller img {
    display: block;
    width: 110px;
    height: 135px
}

.m-ui-tiger .roller.fx-roll {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-animation: fx-roll 0.5s 0s infinite linear;
    animation: fx-roll 0.5s 0s infinite linear
}

.m-ui-tiger .roller.fx-bounce {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s
}

.m-lottery-scratch {
    position: relative;
    width: 16rem;
    min-height: 100%;
    margin: 0 auto;
    padding-top: 9rem;
    background: url("../images/scratch_page_bg.jpg") no-repeat #ff5e01;
    background-size: 100% auto
}

.m-lottery-scratch .game {
    position: relative;
    display: block;
    width: 10rem;
    margin: 0 auto;
    height: 5.75rem
}

.m-lottery-scratch .game canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-size: 100% 100%
}

.m-lottery-scratch .game button {
    display: block;
    width: 5rem;
    height: 1.5rem;
    margin: 0 auto;
    text-align: center;
    line-height: 1.4rem;
    font-size: 0.7rem;
    color: #fff;
    background-color: #ff5e01;
    border: 0 none;
    cursor: pointer;
    border-radius: 0.3rem
}

.m-lottery-scratch .game button.z-dis {
    background-color: #bcbcbc
}

.m-lottery-scratch .game .ceiling {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 4rem;
    padding: 0.5rem 0 1.25rem;
    background: url("../images/scratch_ceiling.jpg") no-repeat;
    background-size: 100% 100%;
    overflow: hidden
}

.m-lottery-scratch .game .ceiling .tip {
    display: block;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: #ff5e01;
    overflow: hidden
}

.m-lottery-scratch .des {
    margin-top: 2.35rem;
    padding: 0 1.1rem 0.5rem;
    line-height: 1.15rem;
    font-size: 0.6rem;
    color: #fff
}

.m-lottery-scratch .des dt {
    line-height: 1.2rem;
    font-size: 0.7rem;
    font-weight: 700
}

.m-lottery-dial {
    position: relative;
    width: 16rem;
    min-height: 100%;
    margin: 0 auto;
    padding-top: 7rem;
    background: url("../images/dial_page_bg.jpg") no-repeat #f94804;
    background-size: 100% auto
}

.m-lottery-dial .game-dial {
    position: relative;
    width: 12.5rem;
    height: 12.5rem;
    margin: 0 auto
}

.m-lottery-dial .game-dial .dial {
    width: 100%;
    height: 100%;
    background-size: 100% auto
}

.m-lottery-dial .game-dial .pointer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.75rem;
    height: 5.95rem;
    margin: -3.4rem 0 0 -1.875rem;
    background-size: 100% auto;
    -webkit-transform-origin: 1.875rem 3.4rem;
    transform-origin: 1.875rem 3.4rem
}

.m-lottery-dial .game-dial .pointer span {
    position: absolute;
    top: 1.6rem;
    left: 0;
    display: block;
    width: 3.75rem;
    height: 3.75rem;
    cursor: pointer
}

.m-lottery-dial .des {
    margin-top: 4.2rem;
    padding: 0 1.1rem 0.5rem;
    line-height: 1.15rem;
    font-size: 0.6rem;
    color: #fff
}

.m-lottery-dial .des dt {
    line-height: 1.2rem;
    font-size: 0.7rem;
    font-weight: 700
}

.m-lottery-tiger {
    position: relative;
    width: 16rem;
    min-height: 100%;
    margin: 0 auto;
    padding-top: 5.5rem;
    background: url("../images/tiger_page_bg.jpg") no-repeat #ffeec6;
    background-size: 100% auto
}

.m-lottery-tiger .game {
    position: relative
}

.m-lottery-tiger .game .back {
    width: 16rem;
    height: 10.8rem;
    background-size: 100%;
    background-repeat: no-repeat
}

.m-lottery-tiger .game .item {
    position: absolute;
    top: 1.925rem;
    width: 2.75rem;
    height: 3.375rem;
    overflow: hidden
}

.m-lottery-tiger .game .item:nth-child(1) {
    left: 3.475rem
}

.m-lottery-tiger .game .item:nth-child(2) {
    left: 6.625rem
}

.m-lottery-tiger .game .item:nth-child(3) {
    left: 9.775rem
}

.m-lottery-tiger .game .item .roller {
    position: relative
}

.m-lottery-tiger .game .item .roller li.z-last {
    position: absolute;
    top: 100%;
    left: 0
}

.m-lottery-tiger .game .item .roller.fx-bounce {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s
}

.m-lottery-tiger .game .item .roller.fx-roll {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-animation: fx-roll 0.3s 0s infinite linear;
    animation: fx-roll 0.3s 0s infinite linear
}

.m-lottery-tiger .game .item img {
    display: block;
    width: 2.75rem;
    height: 3.375rem
}

.m-lottery-tiger .game .btn {
    position: absolute;
    left: 50%;
    top: 7.65rem;
    width: 10.1rem;
    height: 1.25rem;
    margin-left: -5.05rem;
    background-size: 100%;
    background-repeat: no-repeat
}

.m-lottery-tiger .game .btn span {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.m-lottery-tiger .des {
    padding: 0 1.1rem 0.5rem;
    line-height: 1.15rem;
    font-size: 0.6rem;
    color: #b26722
}

.m-lottery-tiger .des dt {
    line-height: 1.2rem;
    font-size: 0.7rem;
    font-weight: 700
}

@-webkit-keyframes fx-roll {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    100% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes fx-roll {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    100% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

.fx-bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}

@-webkit-keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}
